<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" >
    <head lang="en">
        <title>Edit Corpus</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
        <script type="text/javascript" th:src="@{/lib/layui/layui.js}"/>
        <script type="text/javascript" th:inline="javascript">
            /*<![CDATA[*/
            var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
            //--------------------------------------------------------------
            layui.use(['layedit'], function(){
                //创建一个编辑器
                var $ = layui.$;
                var layedit = layui.layedit;
                layedit.set({
                    uploadImage: {
                        url: basePath+'/image/uploadImage?pid='+parseInt($("#id").val())//接口url
                       ,type: 'post' //默认post
                    }
                });
                var schemeIndex = layedit.build('scheme_editor');
                layedit.sync(schemeIndex);//这样同步不了，只是初始化同步了一下

                $(document).on("click", ".delGroup", function(){
                    console.info("delete group elem.");
                    $(this).parent().parent().remove();
                });

                $(document).ready(function() {
                    console.info()
                    if($("#flag").val()>0){
                        var groups = JSON.parse($("#descGroup").val());
                        console.info(groups);
                        $.each(groups, function (i, e) {
                            $("#desc").after('<tr> <td><textarea lay-verify="required" placeholder="请输入问题描述" class="layui-textarea group" style="min-height: 30px;">'+e.group+'</textarea></td> <td><button class="layui-btn layui-btn-normal delGroup"><i class="layui-icon">&#xe640;</i></button></td> </tr>')
                        });
                    }

                    $("#add").click(function() {
                        console.info("update: add status");

                        if($("#key").val().trim()==""
                        || $("#name").val().trim()==""
                        || $("#summary").val().trim()==""
                        || $("#description").val().trim()==""
                        || $("#supporter").val().trim()==""
                        || $("#reporter").val().trim()==""){
                            return
                        }
                        key = $("#key").val().trim();
                        summary = $("#summary").val().trim();
                        description = $("#description").val().trim();

                        name = $("#name").val().trim();
                        supporter = $("#supporter").val().trim();
                        reporter = $("#reporter").val().trim();


                        schemeContext = layedit.getContent(schemeIndex) //获取html
                        scheme = layedit.getText(schemeIndex) // 获取纯文本
                        if(scheme.trim()==""){
                            layer.msg('请输入解答方案.');
                            return
                        }
                        console.info(layedit.getContent(schemeIndex))
                        console.info(layedit.getText(schemeIndex))
                        var paratmeter = {
                            "id" : parseInt($("#id").val()),
                            "key" : key,
                            "name" : name,
                            "reporter" : reporter,
                            "supporter" : supporter,
                            "scheme" : scheme,
                            "schemeContext" : schemeContext,
                            "summary" : summary,
                            "description" : description
                        };
                        console.log(JSON.stringify(paratmeter));
                        $.ajax({
                            contentType:"application/json;charset=utf-8",
                            url : basePath+"/project/update",
                            type : "post",
                            data : JSON.stringify(paratmeter),
                            dataType : "json",
                            success : function(data) {
                                if(data.hasOwnProperty('code')){
                                    console.log(data);
                                    if(data.code==0){
                                        layer.msg('更新成功.');
                                    }else {
                                        layer.msg('更新失败.'+data.msg);
                                    }
                                }
                            },
                            error:function(){ }
                        });
                    });


                    $("#addGroup").click(function () {
                        rootNode = $(this).parent().parent();
                        rootNode.before('<tr> <td><textarea lay-verify="required" placeholder="请输入问题描述" class="layui-textarea group" style="min-height: 30px;"></textarea></td> <td><button class="layui-btn layui-btn-normal delGroup"><i class="layui-icon">&#xe640;</i></button></td> </tr>')
                    });

                    $("#savaGroup").click(function () {
                        var descGroup = [];
                        var gflag = true;
                        $(".group").each(function(index,element){
                            var group = {};
                            $(this).css("border-color","");
                            //console.info($(this).val());
                            val = $(this).val().trim();
                            if(val==""){
                                gflag = false;
                                $(this).css("border-color","red");
                            }
                            if(gflag){
                                group["group"] = val;
                                descGroup.push(group);
                            }

                        });
                        if(gflag){
                            var project = {
                                "id" : parseInt($("#id").val()),
                                "descGroup" :descGroup,
                                "flag" :descGroup.length,
                            }
//                        if(descGroup.length>0){
//                            project["flag"] = 1;
//                        }else {
//                            project["flag"] = 0;
//                        }
                            console.info(JSON.stringify(project));
                            $.ajax({
                                contentType:"application/json;charset=utf-8",
                                url : basePath+"/project/updateGroup",
                                type : "post",
                                data : JSON.stringify(project),
                                dataType : "json",
                                success: function (msg) {
                                    console.info(msg);
                                    if(msg.hasOwnProperty("code")){
                                        if(msg.code==0){
                                            location.href = basePath+"/project/show";
                                        }else {
                                            layer.msg('更新失败.'+msg.msg);
                                        }
                                    }
                                },
                            });
                        }
                    });
                });
            });

            /*]]>*/
        </script>
    </head>
    <body>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>问题详情页</legend>
        </fieldset>

        <input id="id" th:value="${project.id}" style="display: none"/>
        <input id="flag" th:value="${project.flag}" style="display: none"/>
        <input id="descGroup" th:value="${project.descGroup}" style="display: none"/>
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">Key</label>
                <div class="layui-input-inline">
                    <input type="text" id="key" name="key" lay-verify="required" autocomplete="off" placeholder="请输入问题标识" th:value="${project.key}" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入项目名称" autocomplete="off" th:value="${project.name}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">问题摘要</label>
                <div class="layui-input-block">
                    <textarea id="summary" name="summary" lay-verify="required" placeholder="请输入问题摘要" th:value="${project.summary}" th:text="${project.summary}" class="layui-textarea" style="min-height: 30px;"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">问题描述</label>
                <div class="layui-input-block">
                    <textarea id="description" name="description" lay-verify="required" placeholder="请输入问题描述" th:value="${project.description}" th:text="${project.description}" class="layui-textarea" style="min-height: 50px;"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">问题组</label>
                <div class="layui-input-block">
                    <table class="layui-table">
                        <colgroup>
                            <col width="800"/>
                            <col width="200"/>
                        </colgroup>
                        <tbody>
                        <tr id="desc">
                            <td>增加相同问题描述</td>
                            <td>操作</td>
                        </tr>
                        <tr>
                            <td><button class="layui-btn" id="addGroup"><i class="layui-icon">&#xe608;</i> 添加</button></td>
                            <td><button class="layui-btn" id="savaGroup">保存</button></td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <!--<div class="layui-form-item layui-form-text">-->
                <!--<label class="layui-form-label">解决方案</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<textarea id="scheme" name="scheme" lay-verify="required" placeholder="请输入问题描述" th:value="${project.scheme}" th:text="${project.scheme}" class="layui-textarea" style="min-height: 50px;"></textarea>-->
                <!--</div>-->
            <!--</div>-->

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">解决方案</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea layui-hide" id="scheme_editor" name="schemeContext" th:text="${project.schemeContext}" th:value="${project.schemeContext}"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">报告人</label>
                <div class="layui-input-inline">
                    <input type="text" id="reporter" name="reporter" lay-verify="required" placeholder="请输入报告人" th:value="${project.reporter}" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">支持人</label>
                <div class="layui-input-inline">
                    <input type="text" id="supporter" name="supporter" lay-verify="required" placeholder="请输入支持人" th:value="${project.supporter}" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" id="add">更新</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </body>
</html>